<template>
  <div>
    <el-table
      fixed
      :data="table.rows"
      highlight-current-row
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <template v-for="(item, index) in table.columns">
        <el-table-column
          :prop="item.columnName"
          :label="item.display"
          :key="index"
          v-if="item.ls"
        ></el-table-column>
      </template>
      <el-table-column align="right" v-if="searchPlaceholder">
        <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          @keyup.enter.native="search_enter"
          :placeholder="searchPlaceholder"/>
      </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  name: 'DataTable'
})
export default class extends Vue {
  @Prop({ type: Object, default: () => ({}) }) private table: any
  @Prop({ type: Function, default: () => () => {} })
  private selectionChange!: Function

  private search:String=''
  private search_enter(){
      this.$emit('search_enter',this.table.searchCols,this.search);
      this.search='';
  }
  get searchPlaceholder(){
      //return '帐号、名称'
      var cols=this.table.searchCols;
      if(cols){
          return Object.keys(cols).map(k=>cols[k]).join('、')
      }
      return '';
  }

}
</script>

<style lang="scss" scoped>
</style>
